<?xml version="1.0" encoding="UTF-8"?>

<div xmlns="http://www.w3.org/1999/xhtml" component="$model/UI2/system/components/justep/window/window" data-bind="component:{name:'$model/UI2/system/components/justep/window/window'}" __justepbasexid__="__baseID__" components="$model/UI2/system/components/justep/panel/panel,$model/UI2/system/components/justep/panel/child,$model/UI2/system/components/justep/windowDialog/windowDialog,$model/UI2/system/components/justep/window/window,$model/UI2/system/components/justep/titleBar/titleBar,$model/UI2/system/components/justep/button/button,$model/UI2/system/components/justep/button/toggle,">  
  <div xmlns="" component="$model/UI2/system/components/justep/panel/panel" class="x-panel x-full" xid="panel1" data-bind="component:{name:'$model/UI2/system/components/justep/panel/panel'}"> 
    <div class="x-panel-top" xid="top1" component="$model/UI2/system/components/justep/panel/child" data-bind="component:{name:'$model/UI2/system/components/justep/panel/child'}"> 
      <div component="$model/UI2/system/components/justep/titleBar/titleBar" class="x-titlebar" xid="titleBar1" data-bind="component:{name:'$model/UI2/system/components/justep/titleBar/titleBar'}" data-config="{&quot;title&quot;:&quot;toggle&quot;}"> 
        <div class="x-titlebar-left" xid="div1" id="te"> 
          <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link btn-icon-left" xid="button20" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:returnMain" data-config="{&quot;icon&quot;:&quot;icon-chevron-left&quot;}"> 
            <i xid="i11" class="icon-chevron-left"/>  
            <span xid="span11"/> 
          </a> 
        </div>  
        <div class="x-titlebar-title" xid="div2">toggle</div>  
        <div class="x-titlebar-right " xid="div3"> 
          <div class="empty"/> 
        </div> 
      </div> 
    </div>  
    <div id="aler"/>  
    <div class="x-panel-content" xid="content2" component="$model/UI2/system/components/justep/panel/child" data-bind="component:{name:'$model/UI2/system/components/justep/panel/child'}"> 
      <h3 style="height:48px;vertical-align: middle;padding: 8px;display: inline-block;">toggle style</h3>  
      <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="button56" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'},visible:isVisible" data-events="onClick:showStyleSource" data-config="{&quot;label&quot;:&quot;源码&quot;}"> 
        <i xid="i57"/>  
        <span xid="span56">源码</span> 
      </a>  
      <div xid="showToggleStyle"> 
        <span component="$model/UI2/system/components/justep/button/toggle" class="x-toggle" xid="toggle3" data-config="{&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;label&quot;:{&quot;off&quot;:&quot;OFF&quot;,&quot;on&quot;:&quot;ON&quot;}}" data-bind="component:{name:'$model/UI2/system/components/justep/button/toggle'}"> 
          <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="checkbox"></input>  
          <label xmlns:xhtml="http://www.w3.org/1999/xhtml" data-on="ON" data-off="OFF">  
            <span/> 
          </label> 
        </span>  
        <span component="$model/UI2/system/components/justep/button/toggle" class="x-toggle x-toggle-sm" xid="toggle5" OFF="sm" ON="sm" data-config="{&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;label&quot;:{&quot;off&quot;:&quot;sm&quot;,&quot;on&quot;:&quot;sm&quot;}}" data-bind="component:{name:'$model/UI2/system/components/justep/button/toggle'}"> 
          <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="checkbox"></input>  
          <label xmlns:xhtml="http://www.w3.org/1999/xhtml" data-on="sm" data-off="sm">  
            <span/> 
          </label> 
        </span>  
        <span component="$model/UI2/system/components/justep/button/toggle" class="x-toggle x-toggle-xs" xid="toggle6" OFF="xs" ON="xs" data-config="{&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;label&quot;:{&quot;off&quot;:&quot;xs&quot;,&quot;on&quot;:&quot;xs&quot;}}" data-bind="component:{name:'$model/UI2/system/components/justep/button/toggle'}"> 
          <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="checkbox"></input>  
          <label xmlns:xhtml="http://www.w3.org/1999/xhtml" data-on="xs" data-off="xs">  
            <span/> 
          </label> 
        </span>  
        <span component="$model/UI2/system/components/justep/button/toggle" class="x-toggle x-toggle-lg" xid="toggle7" OFF="lg" ON="lg" data-config="{&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;label&quot;:{&quot;off&quot;:&quot;lg&quot;,&quot;on&quot;:&quot;lg&quot;}}" data-bind="component:{name:'$model/UI2/system/components/justep/button/toggle'}"> 
          <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="checkbox"></input>  
          <label xmlns:xhtml="http://www.w3.org/1999/xhtml" data-on="lg" data-off="lg">  
            <span/> 
          </label> 
        </span>  
        <span component="$model/UI2/system/components/justep/button/toggle" class="x-toggle" xid="toggle4" disabled="true" OFF="禁用" data-config="{&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;label&quot;:{&quot;off&quot;:&quot;禁用&quot;,&quot;on&quot;:&quot;ON&quot;}}" data-bind="component:{name:'$model/UI2/system/components/justep/button/toggle'}"> 
          <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="checkbox"></input>  
          <label xmlns:xhtml="http://www.w3.org/1999/xhtml" data-on="ON" data-off="禁用">  
            <span/> 
          </label> 
        </span> 
      </div>  
      <h3 style="height:48px;vertical-align: middle;padding: 8px;display: inline-block;">toggle event</h3>  
      <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="button58" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:showJsSource" data-config="{&quot;label&quot;:&quot;js&quot;}"> 
        <i xid="i59"/>  
        <span xid="span58">js</span> 
      </a>  
      <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="button57" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'},visible:isVisible" data-events="onClick:showEventSource" data-config="{&quot;label&quot;:&quot;源码&quot;}"> 
        <i xid="i58"/>  
        <span xid="span57">源码</span> 
      </a>  
      <div xid="toggleEvent"> 
        <span component="$model/UI2/system/components/justep/button/toggle" class="x-toggle" xid="toggleVal" name="togg" ON="on" OFF="off" value="on" data-config="{&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;label&quot;:{&quot;off&quot;:&quot;off&quot;,&quot;on&quot;:&quot;on&quot;},&quot;name&quot;:&quot;togg&quot;,&quot;value&quot;:&quot;on&quot;}" data-bind="component:{name:'$model/UI2/system/components/justep/button/toggle'}" data-events="onChange:toggleChange"> 
          <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="checkbox" name="togg" value="on"></input>  
          <label xmlns:xhtml="http://www.w3.org/1999/xhtml" data-on="on" data-off="off">  
            <span/> 
          </label> 
        </span>  
        <a component="$model/UI2/system/components/justep/button/button" class="btn btn-default" xid="button1" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:controlToggle" data-config="{&quot;label&quot;:&quot;通过其他组件控制toggle的状态&quot;}"> 
          <i xid="i1"/>  
          <span xid="span1">通过其他组件控制toggle的状态</span> 
        </a> 
      </div>  
      <h3 style="height:48px;vertical-align: middle;padding: 8px;display: inline-block;">toggleGroup</h3>  
      <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="button59" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'},visible:isVisible" data-events="onClick:showToggleGroupSource" data-config="{&quot;label&quot;:&quot;源码&quot;}"> 
        <i xid="i60"/>  
        <span xid="span59">源码</span> 
      </a>  
      <div xid="showToggleGroup"> 
        <p>name相同为一组,type="checkbox"</p>  
        <span component="$model/UI2/system/components/justep/button/toggle" class="x-toggle" xid="toggle10" ON="开" OFF="关" type="checkbox" name="togglecheckbox" data-config="{&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;label&quot;:{&quot;off&quot;:&quot;关&quot;,&quot;on&quot;:&quot;开&quot;},&quot;name&quot;:&quot;togglecheckbox&quot;}" data-bind="component:{name:'$model/UI2/system/components/justep/button/toggle'}"> 
          <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="checkbox" name="togglecheckbox"></input>  
          <label xmlns:xhtml="http://www.w3.org/1999/xhtml" data-on="开" data-off="关">  
            <span/> 
          </label> 
        </span>  
        <span component="$model/UI2/system/components/justep/button/toggle" class="x-toggle" xid="toggle11" ON="开" OFF="关" type="checkbox" name="togglecheckbox" data-config="{&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;label&quot;:{&quot;off&quot;:&quot;关&quot;,&quot;on&quot;:&quot;开&quot;},&quot;name&quot;:&quot;togglecheckbox&quot;}" data-bind="component:{name:'$model/UI2/system/components/justep/button/toggle'}"> 
          <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="checkbox" name="togglecheckbox"></input>  
          <label xmlns:xhtml="http://www.w3.org/1999/xhtml" data-on="开" data-off="关">  
            <span/> 
          </label> 
        </span>  
        <p>name相同为一组,type="radio"</p>  
        <span component="$model/UI2/system/components/justep/button/toggle" class="x-toggle" xid="toggle12" type="radio" name="radiocheckbox" checked="true" data-config="{&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;label&quot;:{&quot;off&quot;:&quot;OFF&quot;,&quot;on&quot;:&quot;ON&quot;},&quot;name&quot;:&quot;radiocheckbox&quot;}" data-bind="component:{name:'$model/UI2/system/components/justep/button/toggle'}"> 
          <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="radio" name="radiocheckbox"></input>  
          <label xmlns:xhtml="http://www.w3.org/1999/xhtml" data-on="ON" data-off="OFF">  
            <span/> 
          </label> 
        </span>  
        <span component="$model/UI2/system/components/justep/button/toggle" class="x-toggle" xid="toggle13" type="radio" name="radiocheckbox" data-config="{&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;label&quot;:{&quot;off&quot;:&quot;OFF&quot;,&quot;on&quot;:&quot;ON&quot;},&quot;name&quot;:&quot;radiocheckbox&quot;}" data-bind="component:{name:'$model/UI2/system/components/justep/button/toggle'}"> 
          <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="radio" name="radiocheckbox"></input>  
          <label xmlns:xhtml="http://www.w3.org/1999/xhtml" data-on="ON" data-off="OFF">  
            <span/> 
          </label> 
        </span> 
      </div> 
    </div> 
  </div>  
  <span xmlns="" component="$model/UI2/system/components/justep/windowDialog/windowDialog" xid="windowDialog" data-bind="component:{name:'$model/UI2/system/components/justep/windowDialog/windowDialog'}" data-config="{&quot;src&quot;:&quot;$model/UI2/system/components/justep/common/demo/dialog.w&quot;}"> 
    <div xmlns:xhtml="http://www.w3.org/1999/xhtml" class="x-dialog-overlay"></div>  
    <div xmlns:xhtml="http://www.w3.org/1999/xhtml" class="x-dialog">  
      <div class="x-dialog-title"> 
        <button class="close"> 
          <span>×</span> 
        </button>  
        <div class="x-dialog-title-text"/> 
      </div>  
      <div class="x-dialog-body"/> 
    </div> 
  </span> 
</div>
